<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>红岩网页导航</title>
		<script src="https://unpkg.com/vue@next"></script><!-- 引入外部文件 -->
	</head>
	<style>
	
	.box{
		width: 100%;
		height: 102px;
		background-color: #e70414;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
		#root{
			width: 1200px;
			height: 102px;
			background-color: #e70414;
			margin-left: auto;
			margin-right: auto;
			margin-top: 50px;
		}
		li{
			list-style-type: none;/* 消除li标签前面的原点 */
		}
		a{
			text-decoration: none;
		}
		#root>li>a{
			/* margin-left: 35px; */
			font-size: 20px;
			line-height: 40px;
			color: aliceblue;
			position: relative;
		}
		#root>li{
			float: left;
			width: 131px;
			height: 100px;		
			/* margin-top: 10px;	 */
			text-align: center;/* 文字居中 */
			border-right: 1px solid white;/* 加上一条白色的线 */
			position: relative;
		}
		#root>li:hover{
			border-right: 0px;
			background-image: url(img/nav.png);
		}
		#root>li>a{
			display: block;
			margin-top: 20px;
		}
		#root>li:nth-child(1){
			/* width: 133px;
			height: 120px; */
			/* padding-top: 30px; */
			position: relative;/* 绝对定位 */
			z-index: 5;/*  */
			background-image: url(img/nav.png);
		}
		p{
			margin-top: -9px;
			width: 133px;
			/* margin-left: 45px; */
			z-index: 3;/* 根据层级决定谁在上面的位置 */
		}
		p>a{
			line-height: none;
			font-size: 10px;
			color: aliceblue;
			
		}
		ul>li>a{
			line-height: 45px;
			color: #F0F8FF;	
		}
		ul>li:hover{
			background-color: #d90616;
		}
		ul>li{
			background-color: #E70414;
			width: 133px;
			
		}
		ul{
			margin-top: 12px;
			margin-left: -38px;
			position: absolute;
			
		}
		[v-cloak]{
			display: none;
		}
	</style>
	<body>
		<div class="box">       <!-- 209010214豆雪琴 -->
			<div id="root" v-cloak>
				<li v-for="n in list" @mouseover="n.show=!n.show" @mouseout="n.show=!n.show"><!-- 鼠标移上去和下来的两种状态 -->
					<a :href="n.url">{{n.name}}</a><!-- 将name的超链接这个样式绑定上去 -->
					<p><a :href="n.url">{{n.mum}}</a></p><!-- 将mum文字的超链接这个样式绑定上去 -->
					<ul v-show="n.show">         
						<li v-for="li in n.lists"><!-- 在lists中进行遍历 二级导航-->
							<a :href="li.url">{{li.name}}</a>
						</li>
					</ul>
				</li>
		</div>
		</div>
		
		<script>
			const data={
					   list:[
						   {name:"首页",url:"#",mum: "Home",show:false},
						   {name:"关于红岩",url:"#",mum:"HongYan",show:false,lists:[
							   {name:"红岩文化",url:"#"}, //二级导航
							    {name:"博物馆机构",url:"#"},
								 {name:"历史沿革",url:"#"}
						   ]},
						   {name:"公告动态",url:"#",mum: "Dynamics",show:false,lists:[
							   {name:"文博信息",url:"#"},//二级导航
							    {name:"政务平台",url:"#"},
							   	 {name:"公告",url:"#"},
								 {name:"专题报道",url:"#"}
						   ]},
						   {name:"馆藏精品",url:"#",mum: "Collections",show:false,lists:[
						   		{name:"一级文物",url:"#"},//二级导航
						   		 {name:"二级文物",url:"#"},
						   		  {name:"三级文物",url:"#"}
						   ]},
						   {name:"陈列展览",url:"#",mum: "Exhibition",show:false,lists:[
						   		{name:"虚拟展览",url:"#"},//二级导航
						   		 {name:"基本陈列",url:"#"},
						   		  {name:"复原陈列",url:"#"},
								  {name:"临时展览",url:"#"},
								  {name:"展览交流",url:"#"}
						   ]},
						   {name:"研究开发",url:"#",mum: "Research",show:false,lists:[
						   		{name:"历史研究",url:"#"},//二级导航
						   		 {name:"艺术创作",url:"#"},
						   		  {name:"影音在线",url:"#"},
								   {name:"文创产品",url:"#"}
						   ]},
						   {name:"公共教育",url:"#",mum: "Education",show:false,lists:[
						   		{name:"党性教育",url:"#"},//二级导航
						   		 {name:"爱国主义教育",url:"#"},
						   		  {name:"研学实践教育",url:"#"},
						           {name:"科普教育",url:"#"}
						   ]},
						   {name:"参观服务",url:"#",mum: "Service",show:false,lists:[
						   		{name:"景点介绍",url:"#"},//二级导航
						   		 {name:"服务内容",url:"#"},
						   		  {name:"网上预约",url:"#"},
						           {name:"志愿服务",url:"#"}
						   ]},
						   {name:"网上预约",url:"#",mum: "Reservation",show:false}
					   ]
				   };
				   const app=Vue.createApp({
					   data(){
						   return data;
					   }
				   }).mount("#root");//将应用控件载入到根组件
		</script>
	</body>
</html>
